<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: white;
            background-color: red;
        }

        ul {
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <div class="tab-btns">
            <button class="active">精选</button>
            <button>智能先锋</button>
        </div>
        <div class="tab-content">
            <ul style="display: block;">
                <li>精选商品</li>
            </ul>
            <ul>
                <li>智能先锋商品</li>
            </ul>
        </div>
    </div>
    <script>
        /*
            dom --   
                选项卡 --- 留言板 


                选项卡
                   用dom中的哪些--api
                    获取元素
                        --document.querySelector('css选择器')--返回一个dom元素
                        --document.querySelectorAll('css选择器')--返回一个伪数组
                    伪数组 forEach遍历
                        liArr.forEach(function(v,i){  v元素 i 下标  })
                    添加事件  
                        dom.onclick = function(){ 
                        }
                        <button onclick='fn()'>  js定义给 fn函数
                    改变行内样式
                        dom.style.xxx = xxx      
                        
                   改变类名
                         dom.className

                   刘健--10 其他一遍      

        
        */
        /* 
                1-获取上面的所有选项 循环遍历添加点击事件
                 点击的时候先让所有的选项 去掉active类名，再让点击的元素 添加一个类             
        
                 2-点击时候 先让所有ul 都隐藏，再让点击的元素 对应的ul显示
 
 

                 掌握
        */
        var btnArr = document.querySelectorAll('.tab-btns button');
        var ulArr = document.querySelectorAll('.tab-content ul');
        // 获取上面的所有选项 循环遍历添加点击事件
        btnArr.forEach(function (btn, i) {
            btn.onclick = function () {
                console.log(btn, i);
                // 点击的时候先让所有的选项 去掉active类名，再让点击的元素 添加一个类  
                btnArr.forEach(v => v.className = '');
                btn.className = 'active'

                // 2-点击时候 先让所有ul 都隐藏，再让点击的元素 对应的ul显示
                ulArr.forEach(v => v.style.display = 'none');
                ulArr[i].style.display = 'block'

            }
        })

    </script>

</body>

</html>